<script setup>
import { getTableAPI, getCountAPI, getChartAPI } from '@/api'

// 获取表格数据
const tableData = ref([])
const getTableData = async () => {
  const res = await getTableAPI()
  tableData.value = res.data
}

// 获取count数据
const countData = ref([])
const getCountData = async () => {
  const res = await getCountAPI()
  countData.value = res.data
}

// 获取图表数据
const option1 = ref({})
const option2 = ref({})
const option3 = ref({})
const getChartData = async () => {
  const res = await getChartAPI()
  const { orderData, userData, videoData } = res.data
  option1.value = {
    title: {
      text: '订单数据',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: Object.keys(orderData.data[0]),
    },
    xAxis: {
      type: 'category',
      data: orderData.date,
    },
    yAxis: {
      type: 'value',
    },
    series: Object.keys(orderData.data[0]).map(key => {
      return {
        name: key,
        type: 'line',
        data: orderData.data.map(item => item[key]),
      }
    }),
  }
  option2.value = {
    title: {
      text: '用户数据',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['新增用户', '活跃用户'],
    },
    xAxis: {
      type: 'category',
      data: userData.map(item => item.date),
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '新增用户',
        type: 'bar',
        data: userData.map(item => item.new),
      },
      {
        name: '活跃用户',
        type: 'bar',
        data: userData.map(item => item.active),
      },
    ],
  }
  option3.value = {
    title: {
      text: '视频数据',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: videoData,
      },
    ],
  }
}

onMounted(() => {
  getTableData()
  getCountData()
  getChartData()
})

const getAvatarUrl = name => {
  return new URL(`../assets/images/${name}.png`, import.meta.url).href
}
</script>

<template>
  <div class="home">
    <!-- mian正文 -->
    <div class="main">
      <div class="main-left">
        <!-- userinfo-card 用户信息卡片 -->
        <el-card class="userinfo-card">
          <div class="userinfo">
            <el-avatar :size="120" :src="getAvatarUrl('user')" />
            <div class="userinfo-content">
              <h3>张三</h3>
              <p>前端开发工程师</p>
            </div>
          </div>
          <template #footer>
            <p>上次登录时间: <span>2024-9-28</span></p>
            <p>上次登录地点: <span>云南</span></p>
          </template>
        </el-card>
        <!-- table 表格 -->
        <el-card class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="40" />
            <el-table-column prop="name" label="Name" width="80" />
            <el-table-column prop="age" label="Age" width="60" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </el-card>
      </div>
      <div class="main-right">
        <div class="count">
          <el-card
            v-for="item in countData"
            :key="item.name"
            :body-style="{ padding: '0' }"
          >
            <div class="count-card">
              <component
                class="icon"
                :style="{ backgroundColor: item.color }"
                :is="item.icon"
              ></component>
              <div class="content">
                <h3>￥{{ item.value }}</h3>
                <p>{{ item.name }}</p>
              </div>
            </div>
          </el-card>
        </div>
        <el-card class="order-echart">
          <MyEchart :options="option1"></MyEchart>
        </el-card>
        <div class="user-video-echart">
          <el-card>
            <MyEchart :options="option2"></MyEchart>
          </el-card>
          <el-card>
            <MyEchart :options="option3"></MyEchart>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;

  .main {
    flex: 1;
    display: flex;
    gap: 20px;
    .main-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      .userinfo-card {
        .userinfo {
          display: flex;
          align-items: center;
          gap: 50px;
          h3 {
            font-size: 30px;
            line-height: 2;
          }
        }
        .el-card__footer {
          p {
            margin: 10px 0;
            span {
              margin-left: 20px;
            }
          }
        }
      }
      .table {
        flex: 1;
      }
    }
    .main-right {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 20px;
      :deep(.count) {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        .el-card__body {
          height: 100%;
        }
        .count-card {
          display: flex;
          height: 100%;
          .icon {
            height: 70px;
          }
          .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            margin-left: 10px;
            h3 {
              font-size: 18px;
            }
            p {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
      :deep(.order-echart) {
        flex: 2;
        .el-card__body {
          width: 100%;
          height: 100%;
        }
      }
      :deep(.user-video-echart) {
        flex: 2;
        display: flex;
        gap: 20px;
        .el-card {
          flex: 1;
        }
        .el-card__body {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
